/* =============================================================
 * data_table.js v1.0.0
 * =============================================================
 * Original written by Ysy
 * =============================================================
 * Date 03/03/2021
 * ============================================================ */

(function (factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(jQuery);
    }
}(function ($) {

    let miniMenu = function (element, options) {
        this.$element = $(element);
        this.options = $.extend(true, {}, $.fn.mini_menu.defaults, options);

        this.$ul = $(this.options.ul);
        this.$li = $(this.options.li);
        this.location = {};

        this.source = this.options.source;

        this.listen();
    };

    miniMenu.prototype = {

        constructor: miniMenu,

        render: function () {// 渲染

            if (!this.source && Object.is(Object.keys(this.source).length, 1)) {
                return;
            }

            this.displayText();

            $(document.body).append(this.$ul);

            this.position();

            this.show();
        },

        displayText: function () {// 显示文本
            this.$ul.find("li").remove();
            let menuList = this.source.find(f => Object.is(this.$current.data("id"), f.id));

            if (!menuList.children && Object.is(Object.keys(menuList.children).length, 0)) {
                return;
            }

            menuList.children.forEach((value, index) => {
                let li = "<li><a href='#' data-url='" + value.url + "' data-id='" + value.id + "' data-text='" + value.text + "'>" + value.text + "</a></li>";
                this.$ul.append(li);
            });
        },

        position: function () {// 定位
            this.location = this.$current.position();
            let windowsHeight = $(window).height();
            let offsetH = 36 * (this.$ul.find("li").length - 1);
            if ((this.location.top + this.$ul.height()) > windowsHeight) {
                this.$ul.css({top: this.location.top - offsetH});
            } else {
                this.$ul.css({top: this.location.top});
            }

        },

        show: function () {
            this.$ul.fadeIn(0);
            // this.$ul.animate({left: "70px"}, 2000, "easeOutQuart");
            // this.$main.animate({bottom: "50px"}, 2000);
        },

        hide: function () {
            this.$main.fadeOut(2000);
            this.destroy();
        },

        listen: function () {
            this.$element.on("mouseenter", "li", $.proxy(this.mouseEnter, this))
                .on("mouseleave", "li", $.proxy(this.mouseLeave, this));
            this.$ul.on("mouseleave", $.proxy(this.mouseLeave, this));
        },

        mouseEnter: function (e) {
            this.$current = $(e.target).closest("li");
            this.render();
        },

        mouseLeave: function (e) {
            let x = e.pageX;
            let y = e.pageY;
            if (x < (this.$current.width() + this.$element.width()) && y >= this.location.top && y <= (this.location.top + this.$ul.height())) {

            } else {
                // this.destroy();
            }
        },

        destroy: function () {
            this.$ul.detach();
        },
    };

    let old = $.fn.mini_menu;

    $.fn.mini_menu = function (options) {
        return new miniMenu(this, options);
    };

    $.fn.mini_menu.defaults = {
        ul: "<ul class='mini_nav nav_second_level'></ul>",
        li: "<li><a href='#' data-url='' data-id='' data-text=''></a></li>",
        source: [],
    };

    $.fn.mini_menu.Constructor = miniMenu;

    $.fn.mini_menu.noConflict = function () {
        $.fn.mini_menu = old;
        return this;
    };
}));
